<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" style="width:70%;margin:50px auto">
    <el-tab-pane label="我的订单" name="first" style="text-align:left">
        订单筛选：
        <el-select v-model="value" placeholder="请选择" style="margin-right:10px">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-date-picker
            v-model="date"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
        <p>当前共查询到 <span style="color:red">10</span> 条订单,总订单额度 <span style="color:red">515600</span> 元</p>
        <P style="text-align:right;margin-bottom:10px"><span style="color:red;cursor:pointer;margin-right:6px;text-decoration:underline" @click="addOrder">添加订单</span></P>
        <div style="position:fixed;width:100%;height:100%;background:rgba(0,0,0,.3);top:0;left:0;z-index:999" v-if="isAdd">
            <el-card class="box-card">
                <h3 style="text-align:center;margin:10px auto">添加订单</h3>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="典礼日期:">
                        <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="典礼时间:">
                        <el-select v-model="form.region1" placeholder="">
                        <el-option label="上午" value="morning"></el-option>
                        <el-option label="下午" value="afternoon"></el-option>
                        <el-option label="晚上" value="evening"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="婚礼公司:">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人:">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话:">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="酒店名称:">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="酒店地址:">
                        <el-select v-model="form.region" placeholder="">
                        <el-option label="北京" value="beijing"></el-option>
                        <el-option label="外地+1000" value="other"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="价格:">
                        2000
                    </el-form-item>
                    <el-form-item label="备注:">
                        <textarea name="" id="" cols="10" rows="3"></textarea>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="goBack">返回</el-button>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
        <table>
            <tr>
                <th>典礼时间</th>
                <th>下单公司</th>
                <th>联系人联系电话</th>
                <th>酒店名称 酒店地址</th>
                <th>下单时间</th>
                <th>金额</th>
                <th>订单类型</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>
                    2018年10月1日<br>
                    上午
                </td>
                <td>
                    北京XXXX婚礼策划
                </td>
                <td>
                    张艺谋<br>
                    138123455678
                </td>
                <td>香格里拉</td>
                <td>
                    2018年6月1日<br>
                    13:36
                </td>
                <td>2000</td>
                <td>婚庆订单</td>
                <td></td>
                <td><span style="color:red;cursor:pointer;margin-right:6px;text-decoration:underline">删除订单</span></td>
            </tr>
            <tr>
                <td>
                    2018年10月1日<br>
                    上午
                </td>
                <td>
                    北京XXXX婚礼策划
                </td>
                <td>
                    张艺谋<br>
                    138123455678
                </td>
                <td>香格里拉</td>
                <td>
                    2018年6月1日<br>
                    13:36
                </td>
                <td>2000</td>
                <td>婚庆订单</td>
                <td></td>
                <td><span style="color:red;cursor:pointer;margin-right:6px;text-decoration:underline">删除订单</span></td>
            </tr>
            <tr>
                <td>
                    2018年10月1日<br>
                    上午
                </td>
                <td>
                    北京XXXX婚礼策划
                </td>
                <td>
                    张艺谋<br>
                    138123455678
                </td>
                <td>香格里拉</td>
                <td>
                    2018年6月1日<br>
                    13:36
                </td>
                <td>2000</td>
                <td>婚庆订单</td>
                <td></td>
                <td><span style="color:red;cursor:pointer;margin-right:6px;text-decoration:underline">删除订单</span></td>
            </tr>
        </table>

    </el-tab-pane>
    <el-tab-pane label="个人资料" name="second">
        <HostPersonal/>
    </el-tab-pane>
    <el-tab-pane label="我的假期" name="third">
        <Vacation/>
    </el-tab-pane>
    <el-tab-pane label="管理费缴纳" name="fourth"><Payment/></el-tab-pane>
  </el-tabs>
</template>
<script>
import HostPersonal from "./HostPersonal"
import Vacation from './Vacation'
import Payment from './Payment'
  export default {
    name:"Center",
    components:{
        HostPersonal,
        Vacation,
        Payment
    },
    data() {
      return {
          isAdd:false,
        date:'',
        activeName: 'first',
         form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        options: [{
          value: '选项1',
          label: '上午'
        }, {
          value: '选项2',
          label: '下午'
        }, {
          value: '选项3',
          label: '晚上'
        }],
        value: ''
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      addOrder(){
          this.isAdd=!this.isAdd
      },
      goBack(){
          this.isAdd=!this.isAdd
      },
      onSubmit(){
          this.isAdd=!this.isAdd
      },
    }
  };
</script>
<style lang="less" scoped>
    table{
        border-collapse: collapse;
        width: 100%;
        text-align: center;
        vertical-align: middle;
    }
    tr{
        width: 100%;
    }
    tr,td,th,table{
        border: 1px solid gray;
        padding: 10px;
        box-sizing: border-box;

    }
    .box-card {
        width: 480px;
        height: 600px;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    .el-form-item{
        margin-bottom: 10px;
    }
</style>